<template>
	<view class="mainpadding2" style="padding-bottom: 150rpx;">
		<u-tabs :list="xmList" lineColor="#1BA95B" @click="changetab" :activeStyle="{
			    color: '#333333',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			            color: '#333333',
						fontWeight: '400',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 5px; padding-right: 10px; height: 44px;"></u-tabs>
		<view class="flexcenter" v-if="!list.data.length">
			<view class="placeholderimage" style="margin-top: 300rpx;"></view>
		</view>
		<view class="xiahuaxian margin_top" v-for="item in list.data" :key="item.id">
			<view class="flexbetween">
				<view class="shilitu">
					<image :src="item.image_text" class="radius" mode=""></image>
				</view>
				<view class="flexcolumn"
					style="width: 69%;justify-content: space-between;height: 160rpx;align-items: flex-start;">
					<view class="titletext xiaohei fonweight yhxk">{{item.name}}</view>
					<view class="flexbetween" style="width: 100%;">
						<view class="strongtext xiaohui nofonweight margin_right2 margin_top2">
							{{returnkc_attr(item.kc_attr)}}
						</view>
						<view class="flexright">
							<view class="baibtn margin_right2" @click="delitem(item.id)">移除</view>
							<view class="baibtn margin_right2" @click="updown(item.id,'hidden')"
								v-if="item.status=='normal'">下架</view>
							<view class="lvbtn margin_right2" @click="updown(item.id,'normal')"
								v-if="item.status=='hidden'">上架</view>
							<view class="lvbtn" @click="jumpurl('/pages_mypage/kechengtj?id=',item.id)">编辑</view>
						</view>
					</view>
				</view>
			</view>
			<view class="margin_top flexbetween">
				<view class="lvbtn" @click.stop="currentid=item.id;buyShow=true">购买</view>
				<view class="flexleft" @click="jumpurl('/pages_mypage/kechengb?id=',item.id)">
					<view class="margin_right1">
						<u-icon name="plus-circle-fill" color="#1ba95b" size="18"></u-icon>
					</view>
					<view class="titletext fonweight " style="color: #1ba95b;">添加课程表</view>
				</view>
			</view>
		</view>
		<view class="gudingdb mainpadding">
			<view class="bigbtn" @click="jumpurltj('/pages_mypage/kechengtj')">添加课程</view>
		</view>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
		<u-modal :show="buyShow" title="填写手机号" confirmText="确认" @confirm="buykc()" cancelText="取消"
			@cancel="buyShow=false" showCancelButton>
			<view class="slot-content" style="width: 600rpx;">
				<view class="margin_top">
					<input type="number" class="textcenter" placeholder="请输入手机号" v-model="buyMobile">
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				modal: {
					modalShow: false,
					title: "是否确认删除当前课程？",
				},
				currentid: "",
				xmList: [],
				tabsid: "",
				user_zbfapply_listid: "",
				type: 1, //身份:1=主办方,2=俱乐部,3=团队，4场馆，5教练
				buyShow: false,
				buyMobile:""
			}
		},
		onLoad(options) {
			this.user_zbfapply_listid = options.user_zbfapply_listid
			this.type = options.type
		},
		onShow() {
			this.init()
			this.getcgfl()
		},
		methods: {
			buykc(item) {
				if(this.buyMobile==""){
					httpRequest.toast("请输入手机号")
					return false
				}
				this.buyShow = false
				uni.navigateTo({
					url: "/pages_mypage/kechenggm?id=" + this.currentid+"&buyMobile="+this.buyMobile
				})
			},
			returnkc_attr(val) {
				if (val == 1) return "正常"
				if (val == 2) return "秒杀"
				if (val == 3) return "团购"
				if (val == 4) return "砍价"
				if (val == 5) return "积分兑换"
			},
			delitem(id) {
				this.modal.modalShow = true
				this.currentid = id
			},
			getcgfl() {
				httpRequest.request('/api/index/cgCategory', 'POST', {}, false, false, true).then(res => {
					this.xmList = res.data
					this.xmList.unshift({
						id: "",
						name: "全部"
					})
				})
			},
			updown(id, status) {
				httpRequest.request("/api/kccl/updteActivityStatus", 'GET', {
					id,
					status,
					user_zbfapply_id: this.user_zbfapply_listid
				}).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			modalSure() {
				if (this.modal.title == "是否确认删除当前课程？") {
					httpRequest.request("/api/kccl/deleteKc", 'GET', {
						id: this.currentid,
						user_zbfapply_id: this.user_zbfapply_listid
					}).then(res => {
						httpRequest.toast(res.msg)
						if (res.code == 1) {
							this.init()
						}
					})
				}
				this.modalcancel()
			},
			modalcancel() {
				this.modal.modalShow = false
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit,
					cg_category_id: this.tabsid,
					user_zbfapply_id: this.user_zbfapply_listid
				}
				let url = '/api/kccl/myKcIndex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			jumpurl(url, id) {
				if (url == "/pages_mypage/kechengb?id=") { //判断是否是跳转添加课程表，因为添加课程表要看是不是教练身份，教练身份添加不用选择教练
					uni.navigateTo({
						url: url + id + "&user_zbfapply_listid=" + this.user_zbfapply_listid + "&type=" + this.type
					})
					return false
				}
				uni.navigateTo({
					url: url + id + "&user_zbfapply_listid=" + this.user_zbfapply_listid
				})
			},
			jumpurltj(url) {
				uni.navigateTo({
					url: url + "?user_zbfapply_listid=" + this.user_zbfapply_listid
				})
			},
			changetab(e) {
				this.tabsid = e.id
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>